<template>
<div>
    <h2>Your Cart</h2>
    <p v-show="!products.length">
        <i>Please add some prodcuts to cart.</i>
    </p>
    <ul>
        <li 
            v-for="product in products"
            :key="product.id"
        >
            {{product.title}} - {{product.price}} x {{product.quantity}}
        </li>
    </ul>
    <p>Total:{{total}}</p>
</div>    
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    computed: {
        ...mapGetters('cart', {
            products: 'cartProducts',
            total:'cartTotalPrice'
        })
    }
}
</script>
